<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 商户管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/merchantpm' }">商户排名</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="BusinessesRanking">
            <!-- <h1>商户排名</h1> -->

            <!-- 表格 -->
            <el-table max-height="366" :data="tableData" border
                :header-cell-style="{ background: '#fff !important', fontWeight: 'normal', textAlign: 'center' }"
                :row-style="{ height: '65px' }" style="width: 100%;margin-top: 30px;">
                <el-table-column align="center" label="排名">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="用户名称">
                </el-table-column>
                <el-table-column align="center" prop="address" label="门店地址">
                </el-table-column>
                <el-table-column align="center" label="负责人">
                    <template slot-scope="scope">
                        <p>{{ scope.row.director }}</p>
                        <p>{{ scope.row.directorphone }}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="平均星级">
                    <template slot-scope="scope">
                        <el-rate disabled v-model="scope.row.avg"></el-rate>
                        <p style="color:#ec1c0c">{{ scope.row.avg.toFixed(1) }}星</p>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页器 -->
            <div class="block" align="right">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="query.pageNum" :page-sizes="[1, 3, 5, 7]" :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { seleceids } from '@/api/businessesManager'
export default {
    components: { seleceids },
    mounted() {
        this.getData()
    },
    methods: {
        // 初始化表格数据
        async getData() {
            let result = await seleceids(this.query)


            if (result.code == 200) {
                this.tableData = result.data.list.sort((a, b) => b.avg - a.avg)
                this.pageTotal = result.data.total
            } else if (result.code == 400) {
                this.tableData = []

            }
        },


        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        // 改变每页显示数据
        handleSizeChange(val) {
            // 回到第一页
            this.query.pageNum = 1
            this.query.pageSize = val
            this.getData();
        },
        // 点击不同页数
        handleCurrentChange(val) {
            this.query.pageNum = val
            this.getData();
        },
    },
    data() {
        return {
            query: {
                pageNum: 1,  //当前第几页
                pageSize: 3   //每页多少条数据
            },
            tableData: [{
                name: '万达广场宝马维修店',
                address: '山阳区迎宾路',
                director: '张三',
                directorphone: '15236834944',
                avg: 5
            }, {
                name: '万达广场宝马维修店',
                address: '山阳区迎宾路',
                director: '张三',
                directorphone: '15236834944',
                avg: 4
            }, {
                name: '万达广场宝马维修店',
                address: '山阳区迎宾路',
                director: '张三',
                directorphone: '15236834944',
                avg: 3
            }, {
                name: '万达广场宝马维修店',
                address: '山阳区迎宾路',
                director: '张三',
                directorphone: '15236834944',
                avg: 2
            }, {
                name: '万达广场宝马维修店',
                address: '山阳区迎宾路',
                director: '张三',
                directorphone: '15236834944',
                avg: 1
            }],
            pageTotal: 0
        };
    },
};
</script>

<style scoped>
.BusinessesRanking {
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    height: 90%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}


h4 {
    font-weight: 540;
}
</style>
